<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="description" content="大学生就业实训,品质就业,职业规划,IT行业人才基地"/>
    <title>蜗牛书城(woniuxy.com)-正品低价、品质保障、配送及时、轻松购物！</title>

    <!-- 引入Bootstrap核心样式文件 -->
    <link href="/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入jQuery核心js文件 -->
    <script src="/javascript/jQuery-1.12.4.js"></script>
    <!-- 引入BootStrap核心js文件 -->
    <script src="/bootstrap-3.4.1/js/bootstrap.min.js"></script>


    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link href="/css/common.css" rel="stylesheet"/>
    <link href="/css/top.css" rel="stylesheet"/>
    <link href="/css/foot.css" rel="stylesheet"/>

    <link href="/css/cart.css" rel="stylesheet"/>


    <!-- 引入axios的包 -->
    <script src="/javascript/axios-min.js"></script>

    <script src="/javascript/cart.js"></script>
</head>

<style>
    .modal-dialog {
        width: 80%;
    }
</style>


<body>
<!-- ==============  引入顶部的碎片  ===============  -->
<div th:replace="~{commons::top}"></div>


<!-- ==================== 购物车 ==================== -->
<div class="container no-padding book-detail-bg">
</div>

<div class="index mt50">
    <div class="container no-padding">
        <span class="cart-name">我的购物车</span>
    </div>
</div>

<form id="myForm" action="/order/addOrder" method="post">
    <div class="container no-padding">
        <table class="table mt10">
            <tr>
                <td>
                    <div class="checkbox">
                        <label>
                            <input class="all" type="checkbox"> 全选
                        </label>
                    </div>
                </td>
                <td>
                    <div class="checkbox"> 书籍封面</div>
                </td>
                <td>
                    <div class="checkbox"> 书籍名称</div>
                </td>
                <td>
                    <div class="checkbox">
                        单价
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        数量
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        小计
                    </div>
                </td>
                <td>
                    <div class="checkbox">
                        操作
                    </div>
                </td>
            </tr>

            <tr th:each="cart : ${cartList}">
                <td>
                    <input type="text"  name="cartId" th:value="${cart.cartId}" hidden />

                    <input class="goods" type="checkbox" id="goodId" name="bookId" th:value="${cart.bookId}"/>

                </td>

                <td><img th:src="@{|http://localhost:90${cart.bookImg}|}"/></td>
                <td> [[${cart.bookName}]]</td>
                <td class="price"> [[${cart.bookPrice}]]</td>
                <td>
                    <div class="input-group">
                        <span class="input-group-addon glyphicon glyphicon-minus"></span>
                        <input type="text" class="form-control buy-count" name="buyCount" maxlength="3"
                               th:value="${cart.buyCount}">
                        <span class="input-group-addon glyphicon glyphicon-plus"></span>
                    </div>
                    <input type="text" name="subTotal" th:value="${cart.bookPrice * cart.buyCount}" hidden/>
                </td>
                <td class="total-price"> [[${cart.bookPrice * cart.buyCount}]]</td>
                <td><a class="btn btn-danger remove">删除</a></td>
            </tr>


            <tr id="last-tr">
                <td colspan="7" class="no-padding">
                    <a href="#">继续购物</a>
                    |
                    已选择 <span class="choic-num">0</span> 件
                    |
                    <a href="#">删除所选项</a>
                    <a href="#" class="buy btn btn-danger fr ml10" data-toggle="modal" data-target="#myModal"
                       onclick="getAddressInfo()">
                        下单
                    </a>
                    <span class="fr ">合计 : <i class="total">0</i> 元</span>
                    <input id="total" type="text" name="total" value="0" hidden/>
                </td>
            </tr>
        </table>

    </div>

    <!-- 地址选择模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">收货地址选择：</h4>
                </div>
                <div class="modal-body">
                    <table id="address" class="table table-hover">
                        <tr>
                            <td>选择</td>
                            <td>收货人</td>
                            <td>电话</td>
                            <td>详细地址</td>
                        </tr>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="addOrder()">确定下单</button>
                </div>
            </div>
        </div>
    </div>

</form>
<!-- ==============  引入顶部的碎片  ===============  -->
<div th:replace="~{commons::#footer}"></div>


</body>

</html>
